<template>
  <div class="main-view">
    <div class="main-view-button">
      <el-button @click="editData('add')" type="primary">新增资讯</el-button>
      <el-input clearable placeholder="请输入要搜索的资讯标题" v-model="newName" class="input-with-select">
        <template #append>
          <el-button class="input-with-button" @click="searchData">搜索</el-button>
        </template>
      </el-input>
    </div>
    <div class="main-view-info" v-loading="loading">
      <div v-if="state.listData.length > 0">
        <el-table :max-height="state.posheight" :data="state.listData" :row-style="{height:'70px'}" border>
          <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
          <el-table-column label="轮播图" show-overflow-tooltip align="center">
            <template #default="scope">
              <el-carousel v-if="scope.row.images.length > 0" trigger="click" height="150px">
                <el-carousel-item v-for="item in scope.row.images" :key="item">
                  <el-image  fit="cover" :src="item"/>
                </el-carousel-item>
              </el-carousel>  
              <img v-else src="@/assets/img/no-img.png" alt="">
           </template>
          </el-table-column>
          <el-table-column label="标题" width="400" show-overflow-tooltip align="center">
            <template #default="scope">{{ scope.row.title }}</template>
          </el-table-column>
          <el-table-column label="内容" show-overflow-tooltip align="center">
            <template #default="scope"> {{ scope.row.body }} </template>
          </el-table-column>
          <el-table-column label="创建时间" width="200" show-overflow-tooltip align="center">
            <template #default="scope">{{ scope.row.created_at }}</template>
          </el-table-column>
          <el-table-column label="更新时间" width="200" show-overflow-tooltip align="center">
            <template #default="scope">{{ scope.row.updated_at }}</template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="220" show-overflow-tooltip align="center">
            <template #default="scope">
              <el-button @click.prevent="editData('update',scope.row)" type="primary" size="small">修改</el-button>
              <el-button @click.prevent="deleteData(state.listData,scope.row)" type="danger" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="right-view-page">
          <el-pagination 
            layout="total, prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"
            :page-size="10"
            :pageSizes='[10, 20, 30, 40]'
            :current-page="currentPage">
          </el-pagination>
        </div>
      </div>
      <div v-else class="right-view-nodata">
        <img src="@/assets/img/no-data.png" alt="">
        <div>暂无数据</div>
      </div>
    </div>
    <!-- 新增修改资讯 -->
    <el-dialog
      width="30%"
      :title="titleName + '资讯'"
      :close-on-click-modal="false"
      v-model="viewVisible">
      <addNews v-if="viewVisible" :parmas="{type:titleValue,rowInfo:state.rowInfo}" @closeNewsDialog="closeNewsDialog"></addNews>
    </el-dialog>
  </div>
</template>

<script setup>
  import { ref,reactive,onMounted,watch,nextTick } from 'vue';
  import { ElMessage , ElMessageBox } from 'element-plus';
  import API from "@/utils/api";
  import addNews from "../newView/addNews.vue";
  const newName = ref('')
  const titleName = ref('')
  const titleValue = ref('')
  const viewVisible = ref(false)
  const total = ref(0)
  const currentPage = ref(1)
  const loading = ref(false)
  const state = reactive({
    listData:[],
    rowInfo:{},
    h: document.body.clientHeight,
    posheight: 100,
    timer: false,
  })
  watch(() => state.h, (newValue, oldValue) => {
    if(!state.timer) {
      state.posheight = newValue - 150
      state.timer = true
      setTimeout(function (){
        state.timer = false
      },400)
    }
  })
  onMounted(() => {
    getNewsList()
    posTableHeight()
    window.onresize = () => {
      return (() => {
        let a = document.body.clientHeight
        state.h = a
      })()
    }
  })
  const posTableHeight = (() =>{
    let h = document.body.clientHeight,
    new_h = h - 150;
    state.posheight = new_h;
  }) 
  const editData = ((type,val) => {
    titleValue.value = type
    viewVisible.value = true
    if(type == 'add') {
      titleName.value = '新增'
    }else{
      titleName.value = '修改'
      state.rowInfo = val
    }
  })
  const closeNewsDialog = ((val) => {
    viewVisible.value = false
    if(val) {
      currentPage.value = 1
      nextTick(() => {
        state.listData = []
        getNewsList()
      })
    }
  })
  const deleteData = ((list,val) => {
    ElMessageBox.confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      if(list.length === 1 && currentPage.value > 1) {
        currentPage.value = currentPage.value-1
      }
      API.newsList.deleteNews({id:val.id},res => {
        if(res.code == 0) {
          ElMessage.success('删除成功')
          getNewsList()
        }
      })
    }).catch(() => {
    });
  })
  const searchData = (() => {
    currentPage.value = 1
    getNewsList()
  })
  const getNewsList = (() => {
    loading.value = true
    let params = {
      page:currentPage.value,
      limit:10,
      title:newName.value
    }
    API.newsList.getNewsList(params,res => {
      if(res.code == 0) {
        loading.value = false
        state.listData = res.data.details
        total.value = res.data.total
      }
    })
  })
  const handleCurrentChange = ((val) => {
    currentPage.value = val
    getNewsList()
  })
  const cellStyle = ({row,column,rowIndex,columnIndex}) => {
    console.log(columnIndex,'row,column,rowIndex,columnIndex');
    if(columnIndex === 2) {
      // return {'white-space': 'pre-line','height': '70px'}
    }
  }
</script>

<style lang="css">
.el-popper {
  max-width: 50%;
  text-align: start;
}
</style>
<style lang="scss" scoped>
.main-view {
  padding: 20px;
  .main-view-button {
    display: flex;
    text-align: start;
    .input-with-select {
      margin-left: 15px;
    }
    .input-with-button {
      color: #fff;
      background: #409eff;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    .el-input-group {
      width: 370px;
    }
  }
  .right-view-nodata {
    margin-top: 160px;
  }
  .main-view-info {
    margin: 20px 0;
  }
  .right-view-page {
    display: flex;
    justify-content: end;
    margin-top: 15px;
  }
}
::v-deep .el-table .cell.el-tooltip {
  // white-space: pre-line;
  // -webkit-box-orient: vertical;
  // -webkit-line-clamp: 3;
  // overflow: hidden;
  // text-overflow: ellipsis;
  // height: 70px;
  // overflow: hidden;
}

</style>